<template>
    <div class="comment-children-item">
        <div class="top">
            <p class="name">{{ props.data.userName }} -> {{ props.data.toCommentName }}</p>
            <p class="content">{{ props.data.content }}</p>
        </div>
        <div class="bottom">
            <p class="time">{{ props.data.pushTime }}</p>
            <p class="reply" @click="isShowReplyInput = true">
                <el-icon :size="16"><EditPen /></el-icon> <span>回复</span>
            </p>
        </div>
        <div style="margin-top: 10px" class="comment-input" v-if="isShowReplyInput">
            <el-input v-model="commentContent" :rows="4" type="textarea" placeholder="回复他" resize="none" :autofocus="true"></el-input>
            <div style="margin-top: 20px" v-if="isShowReplyInput" class="post">
                <el-button @click="postComment" type="primary">回复评论</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { sendCommentAPI } from "@/api/comment";
import { SendCommentParams, commentItem } from "@/types/api/comment";
import { ElMessage } from "element-plus";
import { defineProps, ref, defineEmits } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const isShowReplyInput = ref(false);
const commentContent = ref("");
const emit = defineEmits(["replayComment"]);

async function postComment() {
    let { contestId, activityId, type } = route.query;
    activityId = activityId as string;
    contestId = contestId as string;
    type = type as string;
    console.log("type", type);
    const data: SendCommentParams = {
        activityId: contestId,
        content: commentContent.value,
        type,
        toCommentId: props.data.id,
        toCommentUserId: props.data.userId,
        rootId: props.rootId,
    };
    const res = await sendCommentAPI(data);
    if (res.data.code === 200) {
        ElMessage({
            message: "回复成功",
            type: "success",
        });
        isShowReplyInput.value = false;
        emit("replayComment");
        commentContent.value = "";
    }
}

const props = defineProps<{
    data: commentItem;
    rootId: string;
}>();
</script>

<style lang="scss" scoped>
.comment-children-item {
    padding: 20px;
    border: 1px dashed #e6e6e6;
    .top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .name {
            font-size: 14px;
            color: $main-color;
        }
        .content {
            color: #333;
            margin-left: 5px;
        }
    }
    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #999;
        margin-top: 5px;
        .reply {
            cursor: pointer;
        }
    }
    .post {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}
</style>
